<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px orange solid;
				width: 60%;
				margin: 0 auto;
				border-collapse: collapse;
				margin-top: 10px;
			}

			table th {
				border: 1px orange solid;
				padding: 10px;
			}

			table td {
				border: 1px orange solid;
				padding: 10px;
			}

			table tr:nth-child(2n) {
				background-color: azure;
			}

			table tr:nth-child(2n+1) {
				background-color: beige;
			}
		</style>
	</head>
	<body>
		行<input type="text" value="" />
		列<input type="text" disabled value="5" />
		<button>生成表格</button>
		<button id="del">删除选中</button>
		<table>
			<tr>
				<th><input type="checkbox">全选</th>
				<th>ID</th>
				<th>日期</th>
				<th>姓名</th>
				<th>地址</th>
			</tr>
		</table>
		<script type="text/javascript">
			function getDate() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1; //从0开始
				var day = date.getDate();
				var hour = date.getHours();
				var min = date.getMinutes();
				var sec = date.getSeconds();
				return year + "年" + month + "月" + day + "日" + hour + "时" + min + "分" + sec + "秒";
			}

			//获取button节点对象
			var btn = document.querySelector("button");
			//注册鼠标单击事件
			btn.addEventListener('click', function() {
				//获取input节点对象(数组)类似数组
				var input = document.querySelectorAll("input");
				//行
				var row = input[0].value;
				//列
				var col = input[1].value;
				// console.log(row, col);
				//获取table节点对象
				var table = document.querySelector("table");
				//创建tr节点对象
				for (var i = 0; i < row; i++) {
					var tr = document.createElement("tr");
					//创建td节点对象
					for (var j = 0; j < col; j++) {
						var td = document.createElement("td");
						if (j == 0) {
							//创建input节点对象
							var input = document.createElement("input");
							input.type = "checkbox";
							input.className = "ck";
							td.appendChild(input);
						} else if (j == 1) {
							td.innerText = i + 1;
						} else if (j == 2) {
							td.innerText = getDate();
						} else if (j == 3) {
							td.innerText = "博为峰";
						} else if (j == 4) {
							td.innerText = "上海";
						}
						//往tr节点对象中追加td节点对象
						tr.appendChild(td);
					}
					//往table节点对象中追加tr节点对象
					table.appendChild(tr);
				}
			})
		</script>
		<script type="text/javascript">
			var del = document.querySelector("#del");
			del.addEventListener('click', function(e) {
				//1.获取选中的tr(类似数组)
				var ck = document.querySelectorAll(".ck");
				//2.遍历 val是input节点对象
				ck.forEach(function(val) {
					if (val.checked) {
						var td = val.parentElement;
						var tr = td.parentElement;
						var table = tr.parentElement;
						table.removeChild(tr);
					}
				})
			})
		</script>
	</body>
</html>
